<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex Demo 1</title>
    <style>
        /*
            1. 设计好DOM结构
            2. 将父盒子设置为伸缩盒子
        */
        
        html,
        body {
            height: 100%;
        }
        
        .root {
            /* 将父盒子设置为伸缩盒子 */
            display: flex;
            height: 100%;
        }
        
        .sidebar {
            width: 20%;
            border: 2px solid #ccc;
            background-color: #ff0;
        }
        
        .content {
            /* width: 300px; */
            /* 排除固定宽度以外的平均等分, 如果只有一份的就占全部余下宽度 */
            flex: 1;
            /* background-color: #e0e0e0; */
        }
        
        .rightbar {
            width: 20%;
            background-color: #999;
        }
        
        .a {
            background-color: pink;
        }
        
        .b {
            background-color: lightblue;
        }
        
        .c {
            background-color: lightgreen;
        }
        
        .d {
            background-color: powderblue;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="sidebar"></div>
        <div class="content a"></div>
        <div class="content b"></div>
        <div class="content c"></div>
        <div class="content d"></div>
        <view class="rightbar"></view>
    </div>
</body>

</html>